@import "@material/textfield/mdc-text-field";
@import "@material/textfield/mixins";

.text-field-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;

  .text-field {
    width: 100%;
  }
}

.text-field-row-fullwidth {
  display: block;

  .text-field-container {
    margin-bottom: 8px;
  }
}

.text-field-variant-container {
  display: flex;
}

.text-field-container {
  min-width: 240px;
}

.demo-text-field-shaped {
  @include mdc-text-field-shape-radius(16px);
}

.demo-text-field-outlined-shaped {
  @include mdc-text-field-outline-shape-radius(50%);
}

.hero-text-field-container {
  display: flex;
  flex: 1 1 100%;
  justify-content: space-around;
  flex-wrap: wrap;

  .text-field-container {
    padding: 20px;
  }
}
